<template>
  <div class="products-container">
    <H1>products Page</H1>
    <div>
      <ul>
        <router-link
          v-for="product in products"
          :to="{ name: 'products', params: { id: product.id } }"
          custom
          v-slot="{navigate, isActive}"
        >
          <li
            @click="navigate"
            :class="{active: isActive}"
          >
            {{ product.name }}
          </li>
        </router-link>
      </ul>
      <div @click="handleClick">
        {{ content }}
      </div>
    </div>
  </div>
</template>

<script>
  export default {
    props: ['id'],
    data() {
      return {
        products: [
          {
            id: '001',
            name: '女装',
            content: '10张女装图片'
          },
          {
            id: '002',
            name: '男装',
            content: '101张男装图片'
          },
          {
            id: '003',
            name: '童装',
            content: '100张童装图片'
          }
        ],
        content: ''
      }
    },

    methods: {
      changeContent(to) {
        const product = this.products.find(p => p.id === to.params.id)
        this.content = product.content
      },
      handleClick() {
        this.$router.push('/detail')
      }
    },

    created() {
      this.changeContent(this.$route)
      // console.log(this.$route.params.id)
      // console.log(this.$route.params.x)
      console.log(this.id)
    },

    // watch: {
    //   // to: 路由要导向的路由状态
    //   // from: 路由来自哪里的路由状态
    //   // next: 路由拦截
    //   $route: {
    //     handler(to, from, next) {
    //       const product = this.products.find(p => p.id === to.params.id)
    //       this.content = product.content
    //     },
    //     immediate: true
    //   }
    // },

    // 组件内部守卫, 只适用于动态组件
    beforeRouteUpdate(to, from, next) {
      this.changeContent(to)
      next()
    }
  }
</script>

<style scoped>
.products-container {
  height: 100%;
}
.products-container > div {
  display: flex;
  height: 100%;
}

.products-container > div > div {
  padding-left: 20px;
}
.products-container ul {
  width: 100px;
  background-color: #eee;
}

.products-container ul li {
  height: 50px;
  text-align: center;
  line-height: 50px;
}

.products-container ul li.active {
  background-color: #000;
  color: #fff;
}

.products-container div {
  
}
</style>